import { Component, OnInit, ViewEncapsulation, ElementRef, ViewChild, Renderer2, Renderer } from '@angular/core';

// import './app-brand.scss';

@Component({
  selector: 'app-focus',
  templateUrl: './app-focus.html',
  encapsulation: ViewEncapsulation.None,
})

export class AppFocusComponent implements OnInit {

  @ViewChild('wh')
  private wh: ElementRef;

  @ViewChild('listbox')
  private listbox: ElementRef;

  private i: number = 1;

  constructor(private rd: Renderer2) {
    // setInterval(() => {
    //   this.OnNext(this.i);
    //   this.i = this.i + 1;
    //   if (this.i > 5) { this.i = 1; }
    // }, 5000);
  }

  ngOnInit() { }

  OnNext(data: any) {
    for (let i = 0; i <= 4; i++) {
      this.rd.setStyle(this.listbox.nativeElement.children[i], 'opacity', 0);
      this.rd.removeClass(this.listbox.nativeElement.children[i], 'slick-current');
      this.rd.removeClass(this.listbox.nativeElement.children[i], 'slick-active');
      this.rd.removeClass(this.wh.nativeElement.children[i], 'slick-active');
    }
    if (data === 1) {
      this.rd.addClass(this.wh.nativeElement.children[0], 'slick-active');
      this.rd.setStyle(this.listbox.nativeElement.children[0], 'opacity', 1);
      this.rd.addClass(this.listbox.nativeElement.children[0], 'slick-current');
      this.rd.addClass(this.listbox.nativeElement.children[0], 'slick-active');
    }
    if (data === 2) {
      this.rd.addClass(this.wh.nativeElement.children[1], 'slick-active');
      this.rd.setStyle(this.listbox.nativeElement.children[1], 'opacity', 1);
      this.rd.addClass(this.listbox.nativeElement.children[1], 'slick-current');
      this.rd.addClass(this.listbox.nativeElement.children[1], 'slick-active');
    }
    if (data === 3) {
      this.rd.addClass(this.wh.nativeElement.children[2], 'slick-active');
      this.rd.setStyle(this.listbox.nativeElement.children[2], 'opacity', 1);
      this.rd.addClass(this.listbox.nativeElement.children[2], 'slick-current');
      this.rd.addClass(this.listbox.nativeElement.children[2], 'slick-active');
    }
    if (data === 4) {
      this.rd.addClass(this.wh.nativeElement.children[3], 'slick-active');
      this.rd.setStyle(this.listbox.nativeElement.children[3], 'opacity', 1);
      this.rd.addClass(this.listbox.nativeElement.children[3], 'slick-current');
      this.rd.addClass(this.listbox.nativeElement.children[3], 'slick-active');
    }
    if (data === 5) {
      this.rd.addClass(this.wh.nativeElement.children[4], 'slick-active');
      this.rd.setStyle(this.listbox.nativeElement.children[4], 'opacity', 1);
      this.rd.addClass(this.listbox.nativeElement.children[4], 'slick-current');
      this.rd.addClass(this.listbox.nativeElement.children[4], 'slick-active');
    }
  }

  onPrev() {
    this.i = this.i - 1 <= 0 ? 5 : this.i - 1;
    this.OnNext(this.i);
  }

  onNext2() {
    this.i = this.i + 1 > 5 ? 1 : this.i + 1;
    this.OnNext(this.i);
  }
}